<template>
  <div class="mt20">
    <el-card class="box-card" :body-style="{ padding: '18px 0px 5px', boxSizing: 'border-box' }">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item class="ml20">
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="right"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select v-model="selectValue" @change="chooseChannel" placeholder="选择渠道">
            <el-option v-for="item in channel" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchData">查询</el-button>
          <el-button type="primary" @click="exportXLS">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="margin-left: 20px" :height="tableHeight" v-loading="tableLoading">
        <el-table-column prop="cid" label="cid"> </el-table-column>
        <el-table-column prop="regs" label="注册数"> </el-table-column>
        <el-table-column prop="roles" label="创角"> </el-table-column>
        <el-table-column prop="invest" label="投入"> </el-table-column>
        <el-table-column prop="recharge" label="充值"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
      dateRange: [new Date(2020, 9, 7, 0, 0), new Date(2020, 9, 9, 0, 0)],
      selectValue: '',
      channel: [],
      tableLoading: false,
      tableData: [
        {
          cid: '总计',
          regs: '',
          roles: '',
          invest: '',
          recharge: '',
        },
      ],
      fullscreenLoading: false,
      mob_token: localStorage.getItem('mob_token'),
      //mob_token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MSwiZXhwIjoxNjM0NzIwMzc0LCJ1c2VybmFtZSI6InRlc3RfdXNlcm5hbWUiLCJyb2xlIjoiYW1kaW4ifQ.gGQap6oKDbIdo6fF9vT5WK1LUjMLCFlDKtZHACjl2Dw',
    };
  },
  created() {
    this.getCurrentScreen();
  },
  mounted() {
    //默认显示最近三天的日期
    var now = new Date();
    var sDay = new Date(now.getTime() - 24 * 3600 * 1000 * 2);
    var syear = sDay.getFullYear();
    var smonth = sDay.getMonth();
    var start_day = sDay.getDate();
    var eyear = now.getFullYear();
    var emonth = now.getMonth();
    var end_day = now.getDate();
    //console.log(syear)
    //console.log(smonth)
    //console.log(start_day)
    //console.log(end_day)
    this.dateRange = [new Date(syear, smonth, start_day, 0, 0), new Date(eyear, emonth, end_day, 0, 0)];
    this.getChannel();
    this.getData();
  },
  methods: {
    // 查询
    searchData() {
      this.getData();
    },
    //选择渠道
    chooseChannel() {
      //console.log(this.selectValue);
    },
    getData() {
      var total_regs = 0,
        total_roles = 0,
        total_invest = 0,
        total_recharge = 0;
      this.tableLoading = true;
      return new Promise((resolve, reject) => {
        let queryObj = {
          //token: this.mob_token,
          stime: this.formatDate(this.dateRange[0]),
          etime: this.formatDate(this.dateRange[1]),
          clearing_type: this.selectValue,
        };
        this.$api.wyChannelHourly(queryObj).then(res => {
          if (res.code == '0') {
            this.tableLoading = false;
            this.tableData = res.data;
            //console.log(this.tableData);
            this.tableData.forEach(function (obj, i) {
              total_regs += obj.regs ? parseFloat(obj.regs) : 0;
              total_roles += obj.roles ? parseFloat(obj.roles) : 0;
              obj.invest = obj.reg_price && obj.regs ? parseFloat(obj.reg_price * obj.regs).toFixed(2) : 0;
              total_invest += obj.reg_price && obj.regs ? parseFloat(obj.reg_price * obj.regs) : 0;
              total_recharge += obj.recharge ? parseFloat(obj.recharge) : 0;
            });
            this.tableData.unshift({
              cid: '总计',
              regs: total_regs.toFixed(2),
              roles: total_roles.toFixed(2),
              invest: total_invest.toFixed(2),
              recharge: total_recharge.toFixed(2),
            });
          }
        });
      });
    },
    // 导出表格
    exportXLS() {
      // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
      let str = `cid,注册数,创角,投入,充值\n`;
      // 增加\t为了不让表格显示科学计数法或者其他格式
      for (let i = 0; i < this.tableData.length; i++) {
        for (const key in this.tableData[i]) {
          str += `${this.tableData[i][key] + '\t'},`;
        }
        str += '\n';
      }
      // encodeURIComponent解决中文乱码
      const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
      // 通过创建a标签实现
      const link = document.createElement('a');
      link.href = uri;
      // 对下载的文件命名
      link.download = 'SEM回报数据表.csv';
      link.click();
    },
    // 获取渠道数据
    getChannel() {
      return new Promise((resolve, reject) => {
        let queryObj = {
          //token: this.mob_token,
          key: 'channel_clearing_type',
        };
        this.$api.wyChoices(queryObj).then(res => {
          if (res.code == '0') {
            this.channel = res.data;
            //console.log(this.channel);
          }
        });
      });
    },
    // 日期格式转化为yyyy-MM-dd HH:mm:ss
    formatDate(date) {
      var date = new Date(date);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      var H = date.getHours();
      H = H < 10 ? '0' + H : H;
      var Mi = date.getMinutes();
      Mi = Mi < 10 ? '0' + Mi : Mi;
      var S = date.getSeconds();
      S = S < 10 ? '0' + S : S;
      return year + '-' + month + '-' + day + ' ' + H + ':' + Mi + ':' + S;
    },
  },
};
</script>
<style lang='stylus' scoped>
body {
}
</style>
